<template>
    <div>

        <el-form :model="ruleForm" :rules="rules" ref="addForm" label-width="50px" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <img src="../../../../static/contract/5-9.png" style="height:auto; width:90%;"/>
                </el-col>

                <el-col :span="12">
                    
                    <el-row :gutter="24">
                        <el-col :span="9">
                            <el-form-item label="1." prop="bzj">
                                <el-input type="text" v-model="ruleForm.bzj" placeholder="保证金"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="2." prop="bzjzbljbfb">
                                <el-input type="text" v-model="ruleForm.bzjzbljbfb" placeholder="保证金所占保留价百分比"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="3. 竞买人数选择:" prop="jmrsxz" label-width="142px">
                                <el-radio label="true" v-model="ruleForm.jmrsxz" @change="numberChange">1</el-radio>
                                <el-radio label="false" v-model="ruleForm.jmrsxz" @change="numberChange">2</el-radio>
                                <!-- <el-input type="text" v-model="ruleForm.zdjmrs" placeholder="最低竞买人数"></el-input> -->
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" v-if="this.jmrsxz">
                        <el-col :span="23">
                            <el-form-item label="4." prop="zdjmrs">
                                <el-input type="text" v-model="ruleForm.zdjmrs" placeholder="最低竞买人数"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="5. 是否同意联合拍卖:" prop="sflhpm" label-width="168px">
                                <el-radio label="true" v-model="ruleForm.sflhpm">是</el-radio>
                                <el-radio label="false" v-model="ruleForm.sflhpm">否</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="6." prop="jfr">
                                <el-input type="text" v-model="ruleForm.jfr" placeholder="交付人"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="7." prop="jfjzrq">
                                <el-date-picker
                                v-model="ruleForm.jfjzrq"
                                type="date"
                                placeholder="交付截止日期"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="8." prop="jfdd">
                                <el-input type="text" v-model="ruleForm.jfdd" placeholder="交付地点"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="9." prop="jffs">
                                <el-select v-model="ruleForm.jffs" style="width:100%" placeholder="交付方式" clearable>
                                    <el-option
                                        v-for="item in this.deliverTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="10." prop="bgfcdr">
                                <el-input type="text" v-model="ruleForm.bgfcdr" placeholder="保管费承担人"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="11." prop="yjzcjjbfb">
                                <el-input type="text" v-model="ruleForm.yjzcjjbfb" placeholder="佣金占成交价百分比"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="23">
                            <el-form-item label="12." prop="hlfybk">
                                <el-input type="text" v-model="ruleForm.hlfybk" placeholder="合理费用包括"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="13." prop="hlfyje">
                                <el-input type="text" v-model="ruleForm.hlfyje" placeholder="合理费用金额"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="14." prop="hlfxzts">
                                <el-input type="text" v-model="ruleForm.hlfxzts" placeholder="合理费限制天数"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="15." prop="jkzffs">
                                <el-select v-model="ruleForm.jkzffs" style="width:100%" placeholder="价款支付方式" clearable>
                                    <el-option
                                        v-for="item in this.payTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="16." prop="jkzfqx">
                                <el-input type="text" v-model="ruleForm.jkzfqx" placeholder="价款支付期限"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row :gutter="24">
                        <el-col :span="13">
                            &nbsp;
                        </el-col>
                        <el-col :span="2">
                            <el-form-item>
                                <el-button type="primary" @click="submit">保存</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>
        </el-form>
    </div>

</template>
<script>
import {getSelectData} from '@/api/dictionary';
export default {
    data () {
        return {
            ruleForm: {
                bzj: '',//保证金
                bzjzbljbfb: '',//保证金所占保留价百分比
                jmrsxz: '',//竞买人数选择
                zdjmrs: '',//最低竞买人数
                sflhpm: 'true',//是否同意联合拍卖
                jfr: "",//交付人
                jfjzrq: "",//交付截止日期
                jfdd: "",//交付地点
                jffs: "",//交付方式
                bgfcdr: "",//保管费承担人
                yjzcjjbfb: '',//佣金占成交价百分比
                hlfybk: "",//合理费用包括
                hlfyje: '',//合理费用金额
                hlfxzts: '',//合理费限制天数
                jkzffs: "",//价款支付方式
                jkzfqx: "",//价款支付期限

            },
            deliverTypeOptions: [],
            payTypeOptions: [],
            jmrsxz: false,

            rules: {
                wtr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                bdzmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zblj: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zqpj: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmfs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmdd: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ggksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                ggjsrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                sfkygg: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                jmrsxz: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                // zdjmrs: [
                //     { required: true, message: '请输入', trigger: 'change' }
                // ],
                sflhpm: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                jfr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jfjzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                jfdd: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jffs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                bgfcdr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jkzffs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jkzfqx: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmccyy: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wscxz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                xdlhts: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wlhclfs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wyzr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zyjjxz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zcwyhmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                rmfymc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ydy: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yde: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yds: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                htksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                htjsrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                wtrqz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrkhh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrzh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrdh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrqzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmrkhh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrzh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrdh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrqzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmdw: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmje: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                remark: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ggmtmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yjzcjjbfb: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                hlfybk: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                hlfyje: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                hlfxzts: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
            }
        };
    },
    methods: {
        numberChange(){
            if(this.ruleForm.jmrsxz == 'false'){
                this.jmrsxz = true;
            }
            else{
                this.jmrsxz = false;
            }
        },
        submit(){
            this.$refs.addForm.validate((valid) => {
                if(valid){
                    this.$emit('submit', this.ruleForm);
                }
                else{
                    this.$message.warning('注意必填项');
                    return ;
                }
            })
        },
        getData(){
            let data = '交付方式';
            getSelectData(data).then((res) => {
                if(res){
                    for(let item in res.data){
                        this.deliverTypeOptions.push({
                            label: res.data[item],
                            value: res.data[item]
                        })
                    }
                }
            });
            let data1 = '价款支付方式';
            getSelectData(data1).then((res) => {
                if(res){
                    for(let item in res.data){
                        this.payTypeOptions.push({
                            label: res.data[item],
                            value: res.data[item]
                        })
                    }
                }
            });
        },

    },
    mounted(){
        this.getData();
    }

}
</script>
